<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>demo</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
    />
    <style>
      canvas {
        /* background-color: cadetblue; */
        margin: 0 auto;
        display: block;
        border: 1px solid cadetblue;
      }
      .input {
        width: 60px;
      }
    </style>
  </head>
  <body>
    <script>
      window.onload = () => {
        //创建canvas
        var canvas = document.createElement("canvas");
        //设置宽高
        canvas.width = 600;
        canvas.height = 600;
        //把标签放入body
        document.body.append(canvas);
        //创建画笔
        var context = canvas.getContext("2d");

        class ball {
          constructor(xMax, yMax, ctx) {
            this.ctx = ctx;
            this.xMax = xMax;
            this.yMax = yMax;
            this.r = this.getRandomNum(5, 25);
            this.x = this.getRandomNum(this.r, this.xMax - this.r);
            this.y = this.getRandomNum(this.r, this.yMax - this.r);
            this.speed = this.getRandomNum(2, 5);
            this.radio = this.getRandomNum(0, 360);
            this.color = [
              this.getRandomNum(0, 255),
              this.getRandomNum(0, 255),
              this.getRandomNum(0, 255),
              Math.random(),
            ];
          }
          getRandomNum(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
          }
          draw() {
            this.ctx.beginPath();
            this.ctx.fillStyle = `rgba(${this.color[0]},${this.color[1]},${this.color[2]},${this.color[3]})`;
            this.ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
            this.ctx.fill();
            this.ctx.closePath();
          }
          changeColor() {}
          move() {
            const spendX = Math.cos((this.radio * Math.PI) / 180) * this.speed;
            const speedY = Math.sin((this.radio * Math.PI) / 180) * this.speed;

            if (this.x - this.r + spendX <= 0) {
              this.x = this.r;
              this.radio = 180 - this.radio;
            } else if (this.x + this.r + spendX >= this.xMax) {
              this.x = this.xMax - this.r;
              this.radio = 180 - this.radio;
            } else {
              this.x = this.x + spendX;
            }
            if (this.y - this.r + speedY <= 0) {
              this.y = this.r;
              this.radio = 360 - this.radio;
            } else if (this.y + this.r + speedY >= this.yMax) {
              this.y = this.yMax - this.r;
              this.radio = 360 - this.radio;
            } else {
              this.y = this.y + speedY;
            }
          }
        }

        let arr = [];

        function init(number) {
          context.clearRect(0, 0, canvas.width, canvas.height);
          arr = [];

          for (let i = 0; i < number; i++) {
            const b = new ball(canvas.width, canvas.height, context);
            b.change = change();
            arr.push(b);
            b.draw();
          }
        }

        const move = function (b) {
          context.clearRect(0, 0, canvas.width, canvas.height);

          arr.map((v) => {
            v.move();
            v.change.call(v);
            v.draw();
          });

          requestAnimationFrame(() => {
            move(b);
          });
        };

        document.querySelector(".input").value = 500;
        init(500);
        move();

        document.querySelector(".btn").addEventListener("click", () => {
          const number = document.querySelector(".input").value;

          console.log(number);

          if (number > 0) {
            init(number);
            move();
          }
        });

        function change() {
          var s = [
            funcgetRandomNum(-1, 1),
            funcgetRandomNum(-1, 1),
            funcgetRandomNum(-1, 1),
          ];
          var size = funcgetRandomNum(-1, 1);
          return function () {
            s.map((v) => {
              if (v > 0) {
                v = funcgetRandomNum(0, 10);
              } else {
                v = funcgetRandomNum(-10, 0);
              }
            });
            this.color.map((v, i) => {
              if (i < 3) {
                if (this.color[i] + s[i] < 0) {
                  this.color[i] = 0;
                  s[i] = -s[i];
                } else if (this.color[i] + s[i] > 255) {
                  this.color[i] = 255;
                  s[i] = -s[i];
                } else {
                  this.color[i] = this.color[i] + s[i];
                }
              }
            });
            if (size > 0) {
              size = Math.random() / 10;
            } else {
              size = -Math.random() / 10;
            }
            if (this.r + size <= 5) {
              this.r = 5;
              size = -size;
            } else if (this.r + size >= 25) {
              this.r = 25;
              size = -size;
            } else {
              this.r = this.r + size;
            }
          };
        }

        function funcgetRandomNum(min, max) {
          return Math.floor(Math.random() * (max - min + 1)) + min;
        }
      };
    </script>

    <div>
      小球数：<input class="input" type="number" /><button class="btn">
        run
      </button>
    </div>
  </body>
</html>
